
import React, { Component, createRef } from "react";
import type { ReactNode } from 'react'


interface iState {
}
interface iProps { }




// forwardRef: 让函数组件可以使用 ref 属性
// forwardRef 是一个高阶组件
// 高阶组件又叫 HOC，是一个函数，接收一个组件，会返回一个新的组件
// 高阶组件是用来提高组件的复用
const Main = React.forwardRef((props, ref: any) => {
    return <>
        <main ref={ref}> 你替老板吃苦，老板替我享福。 </main>
    </>
})

export default class App extends Component {

    state: iState = {}

    mainRef = createRef<HTMLElement>()

    render() {
        return <>
            <div>

                <Main ref={this.mainRef}></Main>

                <button onClick={() => {
                    console.log(this.mainRef.current);

                }}>点击获取</button>
            </div>
        </>
    }

}